<template>
  <view class="point-bill">
    <view class="top">
      <text class="icon"></text>
      <text class="num">{{pointInfo.integral}}</text>
      <text class="text">我的积分</text>
    </view>

    <view class="bottom">
    <view v-if="recordList.length === 0" class="no-img">
      <view class="div"></view>
      <text>无订单</text>
    </view>
    <template v-else>
      <view class="item" v-for="item in recordList" :key="item.id">
        <view class="content">
          <text class="text">{{item.recordType === '+'? '加油': '兑换商品'}}</text>
          <text class="amount" :class="item.recordType==='+'?'add':'' ">{{item.recordType + ' ' + item.integral}}</text>
        </view>
        <view class="time">{{item.createTime}}</view>
      </view>
    </template>
    </view>
  </view>
</template>

<script>
export default {
  head() {
    return {
      title: "积分明细",
    };
  },
  data() {
    return {
      images: [],
      pointInfo: {},
      list: [],
      loading: false, // 加载状态
      finished: false, // 是否完成加载
      refreshing: false, // 是否正在上拉刷新
      img: "/test/1_a01_class_2@2x.png",
      recordList:[]
    };
  },
  computed:{

  },
  mounted() {
    this.getPointsRecordList();
  },
  methods: {
    async getPointsRecordList(){
      try {
        const {phoneNumber, enterpriseId} = this;
        const res = await this.$Request({
          url: "/getCustomerPointsInfo",
          method: "GET",
          data: {
            mobilePhone: phoneNumber,
            enterpriseId,
          }
        });

        if (res.retCode === 0) {
          this.pointInfo = res.data
        }
        const res1 = await this.$Request({
          url: "/getCustomerPointsRecordList",
          method: "GET",
          data: {
            mobilePhone: phoneNumber,
            enterpriseId,
          }
        });

        this.recordList = res1.data.map((ele)=>{
          return {...item, createTime: ele.createTime}
        })
      } catch (error) {
        
      }
    }
  },
};
</script>

<style>
.point-bill {
  width: 100%;
}
.point-bill .top {
  width: 100%;
  height: 398rpx;
  background: url("../static/point/bj@2x.png") no-repeat 0 0;
  background-size: 100% 100%;
  position: relative;
  z-index: -1;
}
.point-bill .top .icon {
  background: url("../static/point/chengzhnagzhi@2x.png") no-repeat 0 0;
  background-size: 100% 100%;
  width: 35rpx;
  height: 35rpx;
  position: absolute;
  right: 30rpx;
  top: 30rpx;
}
.point-bill .top .num {
  width: 600rpx;
  height: 98rpx;
  font-size: 70rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 98rpx;
  text-align: center;
  position: absolute;
  left: calc(50% - 300rpx);
  top: 60rpx;
}
.point-bill .top .text {
  height: 40rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  line-height: 40rpx;
  position: absolute;
  left: calc(50% - 56rpx);
  top: 168rpx;
}
.point-bill .bottom {
  width: 100%;
  min-height:200rpx;
  background: #ffffff;
  box-shadow: 0 2rpx 10rpx 5rpx rgba(227, 227, 227, 0.5);
  border-radius: 25rpx;
  margin-top: -130rpx;
  padding: 40rpx 30rpx;
  box-sizing: border-box;
}

.point-bill .bottom .no-img{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.point-bill .bottom .no-img .div{
  width: 229rpx;
  height:187rpx;
  background: url("../static/point/wu@2x.png") no-repeat 0 0;
  background-size: 100% 100%;

}
.point-bill .bottom .no-img text{
  width: 229rpx;
height: 40rpx;
font-size: 28rpx;
font-weight: 500;
color: #AAAAAA;
line-height: 40rpx;
text-align: center;

}

.point-bill .bottom .item {
  width: 100%;
  height: 156rpx;
  padding: 30rpx 0;
  border-bottom: 1px solid #e0e0e0;
  box-sizing: border-box;
}
.point-bill .bottom .item:nth-last-child(1){
  border-bottom:none;
}
.point-bill .bottom .item .content {
  font-family: PingFangSC-Regular, PingFang SC;
  display: flex;
  justify-content: space-between;
}
.point-bill .bottom .item .content .text {
  display: inline-block;
  height: 45rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #111111;
  line-height: 45rpx;
}
.point-bill .bottom .item .content .amount {
  display: inline-block;
  height: 45rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #111111;
  line-height: 45rpx;
}

.point-bill .bottom .item .content .add {
  color: #f3b235;
}

.point-bill .bottom .item .time {
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 40rpx;
}
</style>
